<template>
  <div flex justify-between mb-4 flex-nowrap>
    <el-menu :default-active="activeId" :collapse="false" class="el-menu-vertical-demo" h-a @select="menuSelect">
      <el-menu-item v-for="(menu,index) in state.websiteList" :key="menu.id" :index="menu.id">
        {{ menu.title }}
      </el-menu-item>
    </el-menu>
    <div class="item-container" w="86%" min-w-800px h-100vh overflow-y-scroll flex justify-between flex-wrap flex-content-start>
      <el-card class="box-card" w="32%" min-w-260px box-border h-180px mr-1 mb-2 cursor-pointer shadow="hover" v-for="(item, index) in activeData.list"
        @click="navigate(item)" :key="index">
        <template #header>
          <div class="card-header">
            <span>{{ item.title }}</span>
          </div>
        </template>
        <div flex justify-start>
          <div class="img-box" w-64px h-64px mr-4>
            <el-image :src="item.icon" w="100%" fit="cover"></el-image>
          </div>
          <div>{{ item.desc }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';

const activeId = ref('hot')
const state = {
  websiteList: [
    {
      title: '热点网站', 
      id: 'hot',
      list: [
        { title: '一键抠图', desc: '一键去除照片背景、证件照换背景、商品白底图', icon: "", link: 'https://tool.lu/cutout/' },
        { title: 'ChatGpt3.5', desc: 'ChatGpt3.5免费使用,需要翻墙', icon: "https://chat-shared.zhile.io/_next/static/media/apple-touch-icon.59f2e898.png", link: 'https://chat-shared.zhile.io/' },
        { title: '百度', desc: '国内垃圾的搜索引擎', icon: "https://www.baidu.com/favicon.ico", link: 'https://www.baidu.com' },
      ]
    },
    {
      title: '资源下载网站', 
      id: 'sources',
      list: [
        { title: '设计素材', desc: '设计素材网站导航', icon: "images/favicon.ico", link: 'https://hao.shejidaren.com/' },
      ]
    },
    {
      title: '其他', 
      id: 'lock',
      list: [
      { title: '博客', desc: '个人博客', icon: "https://jourfreedom.github.io/img/favicon.png", link: 'https://jourfreedom.github.io/' },
      ]
    },
  ]
}

const activeData = computed(() => {
  return state.websiteList.find(e => {
    return e.id == activeId.value
  })
})

const navigate = (row:any) => {
  window.open(row.link, '_blank')
}

const menuSelect = (id: string) => {
  if (id == 'lock') {
    ElMessage.info('禁止访问')
    return
  }
  activeId.value = id
}
</script>

<style lang="scss" scoped></style>